import Empty from "/src/directives/empty/empty.vue";
import {nextTick} from "vue"

import {createVNode, render} from "vue"
import {addClass, removeClass, getStyle} from 'element-plus/es/utils/dom/style'
import {randomLenNum} from "utils/util.js";

const setData = (type, data) => {
  // console.log("setData", type, data)
  // type可以是text、background、visible、icon、customClass
  const instance = emptyOption.emptyInstance
  if (instance) {
    if (type == "text") {
      instance.component.exposed.optionData.text = data
    } else if (type == "background") {
      instance.component.exposed.optionData.background = data
    } else if (type == "visible") {
      instance.component.exposed.optionData.visible = data
    } else if (type == "icon") {
      instance.component.exposed.optionData.icon = data
    } else if (type == "customClass") {
      instance.component.exposed.optionData.customClass = data
    }
  }
}

const toggleEmpty = (el, binding) => {
  let node = emptyOption.emptyNode
  if (emptyOption.attribute.textExr) {
    setData("text", emptyOption.attribute.textExr)
  }
  if (emptyOption.attribute.backgroundExr ) {
    setData("background", emptyOption.attribute.backgroundExr)
  }
  if (emptyOption.attribute.iconExr) {
    setData("icon", emptyOption.attribute.iconExr)
  }
  if (emptyOption.attribute.customClass) {
    setData("icon", emptyOption.attribute.customClassExr)
  }

  /** 如果是数组 判断数组长度  否则 判断是否存在 当做Boolean */
  if ((Object.prototype.toString.call(binding.value) === '[object Array]' && binding.value.length === 0) ||
      (Object.prototype.toString.call(binding.value) !== '[object Array]' && binding.value)) {
    nextTick(() => {
      el.appendChild(node)
    })
  } else { // 移除效果
    nextTick(() => {
      // console.log("el", el)
      // console.log("el", node)
      // console.log("el", emptyOption)
      node.style.display = "none"
      // el.removeChild(node)
    })
  }
}


const emptyOption = {
  emptyNode: null,
  emptyInstance: null,
  attribute: {
    textExr: null,
    iconExr:null,
    backgroundExr: null,
    customClassExr: null,
  }
}


const szEmptyDirective = {
  created(el, binding, vnode, prevVnode) {
  },

  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {
    const textExr = el.getAttribute('xs-empty-text')
    const iconExr = el.getAttribute('xs-empty-icon')
    const backgroundExr = el.getAttribute('xs-empty-background')
    const customClassExr = el.getAttribute('xs-empty-custom-class')

    emptyOption.attribute.textExr=textExr
    emptyOption.attribute.iconExr=iconExr
    emptyOption.attribute.backgroundExr=backgroundExr
    emptyOption.attribute.customClassExr=customClassExr
    let node = document.getElementById("empty-node");
    if (!node) {
      node = document.createElement('div')
      node.setAttribute("id", "empty-node")
    }
    emptyOption.emptyNode = node

    let instance = createVNode(Empty
        // ,
        // {
        //   name: "Empty Box",
        //   data: {
        //     text: textExr,
        //     icon: iconExr,
        //     background: backgroundExr,
        //     customClass: customClassExr
        //   }
        // }
        )

    // 这句话比较重要，将原本应用程序的上线文覆盖过来，
    // 这里用到的app就是在入口文件中通过createApp方法创建的应用程序实例
    // instance.appContext = app._context;

    // 使用render方法渲染组件
    render(instance, node);
    emptyOption.emptyInstance = instance

    // mounted的时候，可能还没有设置bing，所有此时可能是false，在update中更新成true后，再去处理
    binding.value && toggleEmpty(el, binding)
  },


  // 在绑定元素的父组件及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {
    // console.log("updated")
    toggleEmpty(el, binding)
  },

  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {
    console.log("unmounted", el, binding, vnode, prevVnode)
    let node = emptyOption.emptyNode
    el.removeChild(node)

  }
}

export default szEmptyDirective